<script>
import {defineComponent, ref} from 'vue';
import Sidebar from '././common/Sidebar.vue';
import Header from '././common/Header.vue';
import {Promotion} from "@element-plus/icons-vue";
import axios from "axios";
export default defineComponent({
    name: "Main",
  components: {
    Promotion,
    Sidebar,
    Header,
  },
  data() {
    return {
      items: [
        { name: 'Attraction', url: '/attraction/Attraction', },
        { name: 'Hotel', url: '/hotel/Hotel', },
        { name: 'TravelAgency', url: '/travelAgency/TravelAgency', },
        { name: 'Guide', url: '/guide/Guide', }
      ],
      drawer: false,
      activeCard1: 'attraction', // 默认显示 'attraction' 卡片内容
      activeCard2: 'attraction',
      AttractionList:[],
      RealtimeInfoList:[],
      timer: null,
      complaintList:[
        {object:'attraction',content:'景区太拥挤'},
        {object:'hotel',content:'停车位太拥挤'},
        {object:'agency',content:'旅行社路线不行'},
        {object:'guide',content:'导游普通话不行'},
      ]
    }
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchAttraction();
    this.startTimer();
  },

  computed: {
    attractionComplaintList() {
      return this.complaintList.filter(item => item.object === 'attraction');
    },
    hotelComplaintList() {
      return this.complaintList.filter(item => item.object === 'hotel');
    },
    agencyComplaintList() {
      return this.complaintList.filter(item => item.object === 'agency');
    },
    guideComplaintList() {
      return this.complaintList.filter(item => item.object === 'guide');
    },
  },
  methods: {
    publish(id){
      axios.get(`http://localhost:8081/updaterealtimeInfo?id=${id}&status=true`)
    },
    remove(id){
      axios.get(`http://localhost:8081/updaterealtimeInfo?id=${id}&status=false`)
    },
    startTimer() {
      // 设置定时器，假设我们每秒钟调用一次 updateSomething 方法
      this.timer = setInterval(() => {
        this.fetchAttraction();
      }, 15000);
    },
    stopTimer() {
      // 清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null; // 将 timer 设置为 null，表示没有定时器在运行
      }
    },
    fetchAttraction() {
      axios.all([
        axios.get('http://localhost:8081/scenicSpot'), // 替换为你的实际接口地址
        axios.get('http://localhost:8081/realtimeInfo')  // 替换为你的实际接口地址
      ])
          .then(axios.spread((attractionResponse, realtimeInfoResponse) => {
            // 确保两个请求都成功返回
            this.AttractionList = attractionResponse.data;
            this.RealtimeInfoList = realtimeInfoResponse.data;

            // 检查两个数组的长度是否相等且都不为空，以避免运行时错误
            if (this.AttractionList.length === this.RealtimeInfoList.length && this.AttractionList.length > 0) {
              for (let i = 0; i < this.AttractionList.length; i++) {
                // 注意数组索引从0开始
                if (this.RealtimeInfoList[i].visitorCount && this.AttractionList[i].maxCapacity) {
                  // 计算交通流量（访客数/最大容量）
                  this.AttractionList[i].traffic = (this.RealtimeInfoList[i].visitorCount / this.AttractionList[i].maxCapacity * 100).toFixed(2) ;
                  this.AttractionList[i].parking = (this.RealtimeInfoList[i].availableParkingSpaces / this.AttractionList[i].parkingLotCapacity*100).toFixed(2) ;
                  this.AttractionList.sort(function(a, b) {
                    return b.traffic - a.traffic; // 升序
                  })
                } else {
                  // 处理访客数或最大容量为0或未定义的情况
                  this.AttractionList[i].traffic = 0;
                }
              }
            } else {
              console.warn('景区列表和实时信息列表长度不匹配或为空');
            }
          }))
          .catch(error => {
            // 处理请求过程中的错误
            console.error('获取数据失败:', error);
          });

    },

    navigateTo(url) {
      if (url) {
        this.$router.push(url);
      }
    },
    handleAttention(index, event) {
      // 处理逻辑
      this.attentionList[index].status = '已处理';
    },
    punishAttention(index, event) {
      this.attentionList[index].status = '已发布';
    },
  },
})

</script>

<template>
  <body>
  <el-col style="height: 100%;">
    <Header />
    <el-row style="height: 100%;">
      <el-col :span="3" style="height: 100%;">
        <Sidebar />
      </el-col>
      <el-col :span="21" style="height: 100%;background-color:#f7f7f7;overflow: scroll">
        <div style="background-color:#f7f7f7">
          <div style="display: flex;flex-direction:column;background-color: white;border-radius: 30px;margin: 20px;padding: 0px 20px 20px 20px">
            <h1 style="text-align: center;color: #9d2933" >快速导航<el-icon><promotion/></el-icon></h1>
            <el-row style="display: flex; justify-content: space-between;">
            <el-button class="lbl-hotel" v-for="item in items" :key="item.name" @click="navigateTo(item.url)" style="margin-left: 20px">{{ item.name }}</el-button>
            </el-row>
          </div>

          <div style="margin: 20px;padding: 20px;border-radius: 30px;background-color: white">
            <h1 style="text-align: center;">告警信息</h1>
            <el-row style="margin: 0px 20px 20px 20px" >

              <el-card style="margin-left: 150px ;width: 1000px" >
              <el-table :data="AttractionList" stripe height=100% style="width: 95%" >
                <el-table-column fixed prop="id" label="景区编号" width="100" align="center" />
                <el-table-column fixed prop="name" label="景区名" width="200" align="center"/>
                <el-table-column
                    prop="traffic"
                    label="客流率"
                    width="180"
                    align="center"
                    scoped-slot="scope"
                >
                  <template v-slot:default="scope">
        <span :style="{ color: scope.row.traffic > 75 ? 'red' : 'black' }">
          {{ scope.row.traffic }}%
        </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="parking"
                    label="停车场剩余占比"
                    width="180"
                    align="center"
                    scoped-slot="scope"
                >
                  <template v-slot:default="scope">
        <span :style="{ color: scope.row.parking < 20 ? 'red' : 'black' }">
          {{ scope.row.parking }}%
        </span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="200" align="center">
                  <template #default="scope">
                    <el-button link type="primary" @click="publish(scope.row.id)">发布景区限流</el-button>
                    <el-button link type="primary" @click="remove(scope.row.id)">解除景区限流</el-button>
                  </template>
                </el-table-column>
              </el-table>
              </el-card>

            </el-row>
            <el-col span="12" style="margin: 0px 20px 20px 20px">
              <h1 style="text-align: center;">举报信息</h1>
              <el-card style="width: 650px;height: auto">
                <template #header>
                  <el-row class="card-header">
                    <el-row class="card-header" style="font-size: large;color: #9d2933;">
                      <p :class="{ 'active-card': activeCard2 === 'attraction' }"
                          @click="activeCard2 = 'attraction'" style="margin-right: 25px;margin-left: 25px;border: 1px solid #9d2933;border-radius: 60px;padding: 10px" class="p1">景区</p>
                      <p :class="{ 'active-card': activeCard2 === 'hotel' }"
                          @click="activeCard2 = 'hotel'" style="margin-right: 25px;margin-left: 25px;border: 1px solid #9d2933;border-radius: 60px;padding: 10px">酒店</p>
                      <p :class="{ 'active-card': activeCard2 === 'travelAgency' }"
                          @click="activeCard2 = 'travelAgency'" style="margin-right:25px;margin-left: 25px;border: 1px solid #9d2933;border-radius: 60px;padding: 10px ">旅行社</p>
                      <p :class="{ 'active-card': activeCard2 === 'guide' }"
                          @click="activeCard2 = 'guide'" style="margin-right:50px;margin-left: 25px;border: 1px solid #9d2933;border-radius: 60px;padding: 10px ">导游</p>
                    </el-row>
                  </el-row>
                </template>
                <div v-if="activeCard2 === 'attraction'">
                  <el-row style="background-color: white">
                    <el-col :span="8" style="font-weight: bold;">内容</el-col>
                  </el-row>
                  <el-row v-for="(item, index) in attractionComplaintList" :key= "index" style="background-color: #fff; margin-bottom: 10px;">
                    <el-col :span="8">{{ item.content }}</el-col>
                  </el-row>
                </div>
                <div v-if="activeCard2 === 'hotel'">
                  <el-row style="background-color: white">
                    <el-col :span="8" style="font-weight: bold;">内容</el-col>
                  </el-row>
                  <el-row v-for="(item, index) in hotelComplaintList" :key= "index" style="background-color: #fff; margin-bottom: 10px;">
                    <el-col :span="8">{{ item.content }}</el-col>
                  </el-row>
                </div>
                <div v-if="activeCard2 === 'travelAgency'">
                  <el-row style="background-color: white">
                    <el-col :span="8" style="font-weight: bold;">内容</el-col>
                  </el-row>
                  <el-row v-for="(item, index) in agencyComplaintList" :key= "index" style="background-color: #fff; margin-bottom: 10px;">
                    <el-col :span="8">{{ item.content }}</el-col>
                  </el-row>
                </div>
                <div v-if="activeCard2 === 'guide'">
                  <el-row style="background-color: white">
                    <el-col :span="8" style="font-weight: bold;">内容</el-col>
                  </el-row>
                  <el-row v-for="(item, index) in guideComplaintList" :key= "index" style="background-color: #fff; margin-bottom: 10px;">
                    <el-col :span="8">{{ item.content }}</el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </div>
        </div>

      </el-col>
    </el-row>
  </el-col>
  </body>
</template>

<style scoped>
@import "../assets/css/global.css";
.background-image {
  height: 100vh; /* 使容器高度占满视口 */
  background-image: url('/bg1.png');
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中 */
}
.active-card {
  background-color: #9d2933;
  color: white;
}
</style>